<template>
  <div>
    <div class="login-container">
      <div class="login-register-bg">
        <div class="login-title">
          欢迎来到闲言博客
        </div>
        <div class="login-register-content">
          <a-menu v-model="current" mode="horizontal" @select="selectedKey">
            <a-menu-item key="login"> 管理员注册 </a-menu-item>
          </a-menu>
          <!--登录-->
          <div class="login-info">
            <a-form
              id="components-form-demo-normal-login"
              :form="loginForm"
              class="login-form"
              @submit="handleSubmit"
            >
              <a-form-item>
                <a-input
                  v-decorator="[
                    'username',
                    { rules: [{ required: true, message: '请输入用户名' }] },
                  ]"
                  placeholder="请输入用户名"
                >
                  <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
                </a-input>
              </a-form-item>
              <a-form-item>
                <a-input
                  v-decorator="[
                    'password',
                    { rules: [{ required: true, message: '请输入密码' }] },
                  ]"
                  type="password"
                  placeholder="请输入密码"
                >
                  <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
                </a-input>
              </a-form-item>
              <a-form-item>
                <a-button type="primary" html-type="submit" class="login-form-button">
                  注册
                </a-button>
              </a-form-item>
            </a-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { setToken } from '../../utils/auth'
import userApi from '@/api/myuser'
import md5 from 'js-md5'
export default {
  name: 'AdminRegister',
  data() {
    return {
      current: ['login'],
      showLogin: true,
      showRegister: false,
      loginForm: this.$form.createForm(this),
      registerForm: this.$form.createForm(this)
    }
  },
  beforeCreate() {
  },
  methods: {
    selectedKey(e) {
      console.log(e)
      if (e.key === 'login') {
        this.showLogin = true
        this.showRegister = false
      }
      if (e.key === 'register') {
        this.showRegister = true
        this.showLogin = false
      }
    },
    /* 验证重复密码*/
    handleConfirmBlur() {
    },
    /* 登录*/
    handleSubmit(e) {
      e.preventDefault()
      this.loginForm.validateFields((err, values) => {
        if (!err) {
          values.password = md5(values.password)
          userApi.login(values).then(res => {
            if (res.code === 200) {
              this.$store.commit('SET_USER', res.data.user)
              setToken(res.data.token)
              this.$router.push('/')
              this.$message.success(res.msg)
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    },
    /* 注册事件*/
    handleRegisterSubmit(e) {
      e.preventDefault()
      this.registerForm.validateFields((err, values) => {
        if (!err) {
          // 加密
          console.log(values)
          values.password = md5(values.password)
          userApi.register(values).then(res => {
            if (res.code === 200) {
              this.$message.success(res.msg)
              this.showLogin = true
              this.showRegister = false
              const that = this
              setTimeout(() => {
                that.loginForm.setFieldsValue({ username: values.username })
              }, 200)
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .ant-menu-item{
    width: 50%;
    text-align: center;
  }
  .login-container{
    background-image: url('../../../public/login-back.jpg');
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background-color: skyblue;
    .login-register-bg{
      width: 450px;
      min-height: 450px;
      background-color: #ffffff;
      margin: 160px auto;
      padding:20px 40px 20px 40px;
      .login-title{
        line-height: 70px;
        text-align: center;
        font-size: 24px;
        color: #525252;
        font-weight: bold;
      }
    }
    .login-register-content{
      width: 100%;
      .login-info,.register-info{
        width: 100%;
        margin-top: 30px;
      }
    }
  }

  #components-form-demo-normal-login .login-form {
    max-width: 300px;
  }
  #components-form-demo-normal-login .login-form-forgot {
    float: right;
  }
  #components-form-demo-normal-login .login-form-button {
    width: 100%;
  }
  .register-button {
    width: 100%;
  }
</style>
